<template>
	<div>

		<div style="background: #fff;">
			<div class="box">
				<div class="images">
					<img src="../../assets/imgs/banner2.png" alt="" />
				</div>
				<div class="introduce">
					<h3>地洲介绍</h3>
					<p>{{introduce|filterFun}}</p>
						
				</div>
				<div class="playint">
					<h3>玩转地州</h3>
					<ul>
						<li v-for="(item,path,index) in list" :key="index" >
							<router-link :to="{ path: item.path }">
								<span><img :src="item.imgSrc" alt="" /></span>
								<p v-text="item.title"></p>
							</router-link>
						</li>
						
					</ul>
					
	
				</div>
			</div>
			
		</div>

	</div>
</template>

<script>

	export default {
		data() {
			return {
				introduce:"普洱市有9个少数民族自治县，居住着汉、哈尼 拉祜、佤、傣等14个世居民族，少数民族人口 拉祜、佤、傣等14个世居民族，少数民族人口",
				list:[
					{
						id:1,
						path: '/spec',
						title:'本地特产',
						imgSrc: require('../../assets/imgs/prefecture/state_specialty@2x.png'),
					},
					{
						id:2,
						path: '/deliciousFood',
						title:'特色美食',
						imgSrc: require('../../assets/imgs/prefecture/state_delicacy@2x.png'),
					},
					{
						id:3,
						path: '',
						title:'野生菌',
						imgSrc: require('../../assets/imgs/prefecture/state_mushroom@2x.png'),
					},
					{
						id:4,
						path: '',
						title:'非遗文化',
						imgSrc: require('../../assets/imgs/prefecture/state_culture@2x.png'),
					},
					{
						id:5,
						path: '/scenicSpot',
						title:'旅游景点',
						imgSrc: require('../../assets/imgs/prefecture/state_scenic@2x.png'),
					},
					{
						id:6,
						path: '/rea',
						title:'文旅地产',
						imgSrc: require('../../assets/imgs/prefecture/state_estate@2x.png'),
					},
					{
						id:7,
						path: '/localHousingprices',
						title:'本地房价',
						imgSrc: require('../../assets/imgs/prefecture/state_localprice@2x.png'),
					},
					{
						id:8,
						path: '',
						title:'酒店民宿',
						imgSrc: require('../../assets/imgs/prefecture/state_hotel@2x.png'),
					},
					{
						id:9,
						path: '/localTrip',
						title:'大理出行',
						imgSrc: require('../../assets/imgs/prefecture/state_transport@2x.png'),
					}
					
				]
				
			}
		},
		created() {
			
		},
		methods: {
		
	
			},
		components: {

		},
		computed: {
			
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 40) {
					value = value.substring(0, 45) + '...';
				}
				return value;
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	.hello {
		h1 {
			color: red;
			.fs(38);
		}
	}
	.box{
		height: 100%;
		width: 100%;
		top:0px;
		padding-bottom:50px;
		
		
		.images{
			width:100%;
			height:200px;
			img{
				width:100%;
				height:100%
			}
		}
		.introduce{
			width: calc(100% - 30px);
			padding:20px 15px 10px 15px;
			text-align: left;
			border-bottom:7px solid @border-color;
			h3{
				font-size: 15px;
				color:#333;
				font-weight:bold;
				padding-bottom:20px;
				
			}
			p{
				font-size:15px;
				color:#999;
				line-height: 30px;
				padding-right:16px;
				display: block;
				position: relative;
				&:after{
					position: absolute;
					content: '';
					width: 7px;
					height: 12px;
					right:0px;
					top:0;
					bottom:0;
					margin: auto;
					background: url(../../assets/imgs/home/details_more@2x.png);
					background-size:100% 100%;
				}

			}
		}
		.playint{
			padding:30px 15px;
			text-align: left;
			h3{
				font-size: 15px;
				color:#333;
				font-weight:bold;
				padding-bottom:30px;
				
			}
			ul{
				display: flex;
				flex-wrap:wrap ;
				/*justify-content: space-around;*/
				justify-content: space-between;
				li{
					width: 25%;
					margin-bottom:25px;
					text-align: center;
					span{
						display: block;
						width: 40px;
						height: 40px;
						margin: auto;
						img{
							width: 100%;
							height: 100%;
						}
					}
					&:nth-child(4n){
						margin-right:0px;
					}
					p{
						margin-top:10px;
						font-size: 12px;
						color:@base-sp-text-color;
					}
				}
			}
		}
	}
	
</style>